<template>
    <view class="goodscontent">
        <!-- 分类列表 -->

        <page-head :transparent='false' :fixed="true">
            <slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
            <view slot="bottom">
                    <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
                        <view
                                v-for="(cate, index) in categories"
                                :key="index"
                                :data-cid="cate.id"
                                :data-index="index"
                                :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
                                @tap="tabChange($event)"
                        >
                            {{ cate.name }}
                        </view>
                    </scroll-view>
                    <view class="sort-box">
                        <view
                                class="sort-box-tab sort-model"
                                v-for="(sort, index) in sortList"
                                :data-index="index"
                                :class="[sortIndex == index ? 'sort-box-current' : '']"
                                @tap="sortChange($event)"
                                :key="index"
                        >
                            <!-- 无排序 -->
                            <text v-if="index <= 1">{{ sort.name }}</text>
                            <!-- 有排序 -->
                            <view v-else-if="index >= 2" class="sort-model-box"
                                  :class="[index == 2 ? 'sort-model-box1' : 'sort-model-box2']">
                                <view class="sort-text">{{ sort.name }}</view>
                                <view class="sort-tab">
                                    <view class="sort-up"
                                          :class="[sort.sort == 0 || sort.sort == 1 ? 'sort-up-white' : 'sort-up-red']"></view>
                                    <view class="sort-down"
                                          :class="[sort.sort == 0 || sort.sort == 2 ? 'sort-down-white' : 'sort-down-red']"></view>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
        </page-head>

        <!-- 商品列表 -->
        <tb-goods-list :goodsList="goodsList" :loadingText="loadingText" @eventClick="toDetail"
                       :tm="tbF"></tb-goods-list>
    </view>
</template>

<script>
    import TbGoodsList from '../../components/tb-goods-list.vue';

    let page = 1,
        pageSize = 20,
        cate = 0,
        sort = 'tk_total_sales_des',
        sortby = 'desc',
        seller = '',
        tm = false;

    export default {
        components: {
            TbGoodsList
        },
        data() {
            return {
                title: '',
                //分类信息0全部1女装2内衣3母婴4男装5食品6居家7鞋包8美妆9数码10家电11文体
                categories: [
                    {
                        id: 0,
                        name: '全部'
                    },
                    {
                        id: 1,
                        name: '女装'
                    },
                    {
                        id: 2,
                        name: '内衣'
                    },
                    {
                        id: 3,
                        name: '母婴'
                    },
                    {
                        id: 4,
                        name: '男装'
                    },
                    {
                        id: 5,
                        name: '食品'
                    },
                    {
                        id: 6,
                        name: '家居'
                    },
                    {
                        id: 7,
                        name: '鞋包配饰'
                    },
                    {
                        id: 8,
                        name: '美妆'
                    },
                    {
                        id: 9,
                        name: '数码'
                    },
                    {
                        id: 10,
                        name: '家电'
                    },
                    {
                        id: 11,
                        name: '文体车品'
                    }
                ],
                // 当前选择的分类
                cateCurrentIndex: 0,
                //筛选分类
                sortList: [
                    {
                        id: 0,
                        name: '人气'
                    },
                    {
                        id: 1,
                        name: '销量'
                    },
                    {
                        id: 2,
                        name: '价格',
                        sort: 0
                    },
                    {
                        id: 3,
                        name: '抵扣金额',
                        sort: 0
                    }
                ],
                //当前选择的筛选分类
                sortIndex: 0,
                loadingText: '加载中...',
                goodsList: [],
                tbF: false
            };
        },
        onLoad(event) {
            this.initData();
            seller = event.title;
            if (seller == '天猫') {
                this.ti = '天猫';
                tm = true;
                this.tbF = true;
            } else {
                this.ti = '淘宝';
                tm = false;
                this.tbF = false;
            }
            if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token != 'undefined') {
                uni.setStorageSync('token', decodeURI(event.token));
                uni.setStorageSync('bump', event.bump);
                uni.setStorageSync('relationId', event.relationId);
                uni.setStorageSync('mobile', event.customerId);
            }
            this.setNavigation(seller);
            this.getGoodsList();
            this.setNa();
        },
        onReachBottom: function () {
            this.getGoodsList();
        },
        onPullDownRefresh: function () {
            this.goodsList = [];
            page = 1;
            this.loadingText = '加载中...';
            this.getGoodsList();
        },
        methods: {
            setNa() {
                callNative('showSearchIcon',{searchLink:this.$httpUrl + 'pages/search/search'})
            },
            initData() {
                page = 1;
                pageSize = 20;
                cate = 0;
                sort = 'tk_total_sales_des';
                sortby = 'desc';
                seller = '';
                tm = false;
            },
            genRelationId() {
                let relationId = uni.getStorageSync('relationId');
                if (relationId !== null && relationId !== 'null') {
                    this.getGoodsList();
                } else {
                    const redirection_url = window.location.href;
                    const url =
                        'https://open.21ds.cn/index/extapi/tbkrelationbeian?apkey=80f3e9d1-7e15-04ae-0e69-6aa3e32fa293&infotype=1&offlinescene=4&onlinescene=1&invitercode=M2VV49&return_url=' +
                        redirection_url;
                    appNavigateTo(url);
                }
            },
            setNavigation(title) {
                this.title = title;
                uni.setNavigationBarTitle({
                    title: title
                });
            },
            sortChange: function (e) {
                this.loadingText = '加载中...';
                var sortindex = e.currentTarget.dataset.index;
                if (sortindex >= 2) {
                    if (sortindex == 2) {
                        this.sortList[3].sort = 0;
                        if (this.sortList[sortindex].sort > 1) {
                            this.sortList[sortindex].sort = 1;
                            sort = 'price_des';
                        } else {
                            this.sortList[sortindex].sort = 2;
                            sort = 'price_asc';
                        }
                    } else {
                        this.sortList[2].sort = 0;
                        if (this.sortList[sortindex].sort > 1) {
                            this.sortList[sortindex].sort = 1;

                            sort = 'youhuiquan_desc';
                        } else {
                            this.sortList[sortindex].sort = 2;
                            sort = 'youhuiquan_asc';
                        }
                    }
                } else {
                    this.sortList[2].sort = 0;
                    this.sortList[3].sort = 0;
                    if (sortindex == 0) {
                        sort = 'tk_total_sales_des';
                    } else {
                        sort = 'total_sales_des';
                    }
                }
                this.sortIndex = sortindex;
                page = 1;
                this.goodsList = [];
                this.getGoodsList();
            },
            tabChange: function (e) {
                this.loadingText = '加载中...';
                // 选中的索引
                var index = e.currentTarget.dataset.index;
                // 具体的分类id
                var cateid = e.currentTarget.dataset.cid;
                this.cateCurrentIndex = index;
                // 动态替换内容
                this.content = this.categories[index].name;

                // 读取分类数据
                cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
                // 重置分页及数据
                page = 1;
                this.goodsList = [];
                // 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
                this.getGoodsList();
            },
            async genCategory() {
                try {
                    let res = await this.$request.get('/coupon-product/self/product/classification', {});
                    let datas = res.data.data;
                    let allCate = [{name: '全部', id: ''}];
                    this.categories = allCate.concat(datas);
                } catch (e) {
                    console.log(e);
                }
            },
            async getGoodsList() {
                try {
                    uni.showLoading({
                        title: 'loading...',
                        mask: true
                    });
                    let data = {
                        pageno: page,
                        pagesize: pageSize,
                        cat: cate,
                        istmall: tm,
                        sort: sort,
                        hascoupon: 'true'
                    };
                    // console.log( data);
                    let res = await this.$request.post('/coupon-product/myq/tbGoods/goodsList', {data: data});
                    let datas = res.data;
                    let newList = datas.data;
                    if (newList != '' && newList.length > 0) {
                        this.goodsList = this.goodsList.concat(newList);
                        page++;
                        if (page == 500 || newList.length < 20) {
                            this.loadingText = '没有更多了';
                        }
                    } else {
                        this.loadingText = '没有更多了';
                    }
                    uni.hideLoading();
                } catch (e) {
                    uni.hideLoading();
                    console.log(e);
                    this.loadingText = '没有更多了';
                }
            },
            toDetail(e) {
                h5NavigateTo({
                    url:
                        '../tbdetail/tbdetail?skuId=' +
                        e.num_iid +
                        '&cid=' +
                        cate +
                        '&title=' +
                        e.title +
                        '&seller=' +
                        seller +
                        '&coupon_amount=' +
                        e.coupon_amount +
                        '&startTime=' +
                        e.coupon_start_time +
                        '&endTime=' +
                        e.coupon_end_time +
                        '&tm=' +
                        tm
                });
            }
        }
    };
</script>

<style lang="scss">
    @import '@/common/css/goods-list.scss';

    .sort-box {
        width: 100%;
        min-width: 750px;
    }

    /* view.sort-box-tab:nth-child(1) {
        width: 30%;
    }
    view.sort-box-tab:nth-child(2) {
        width: 30%;
    }
    view.sort-box-tab:nth-child(3) {
        width: 40%;
    } */
    .category-row {
        width: 100%;
        height: 80px;
        line-height: 80px;
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        background-color: aquamarine;

        .category-scroll {
            height: 60px;
            line-height: 60px;
            display: inline-flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;

            .scroll-view-item {
                width: 80px;
                height: 60px;
            }
        }
    }

    .grace-news-list-imgs {
        max-height: 68px;
        overflow: hidden;
    }

    .page-title-row {
        width: 100%;
        height: 80px;
        background-color: red;
        display: flex;

        .back-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 75px;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .page-title {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            text {
                font-weight: 300;
                color: white;
            }
        }
    }

    .header-row {
        //width: 100%;
        width: 750px;
        height: 60px;
        background-image: url('../../static/img/search/list.png');
        background-repeat: no-repeat;
        background-size: cover;

        .header-line {
            width: 100%;
            height: 60px;
            display: inline-flex;
            justify-content: flex-start;
            font-size: 30px;
            align-items: center;

            .header-range {
                width: 30%;
                height: 60px;
                justify-content: space-between;

                image {
                    width: 20px;
                    height: 15px;
                }

                padding-left: 10%;
            }

            .hearder-rate {
                width: 30%;
                height: 60px;

                image {
                    width: 20px;
                    height: 15px;
                }
            }

            .header-price {
                width: 30%;
                height: 60px;

                image {
                    width: 20px;
                    height: 15px;
                }
            }
        }
    }
</style>
